<template>
    <div class="user-info-temps">
        <van-form @submit="onSubmit" ref="userForm">
            <van-field required v-model="userInfo.id_front" label="身份证正面" placeholder="身份证正面"
                :rules="[{ required: true, message: '请上传身份证正面' }]">
                <template #input>
                    <div class="list-box1" v-if="wxReadyOk" @click="chooseImage(1)">
                        <img class="list-item-image" v-if="userInfo.id_front" :src="baseUrl + userInfo.id_front" alt="">
                        <div v-else class="list-item">+</div>
                    </div>
                </template>
            </van-field>
            <van-field required v-model="userInfo.id_aspect" label="身份证反面" placeholder="身份证反面"
                :rules="[{ required: true, message: '请上传身份证反面' }]">
                <template #input>
                    <div class="list-box1" v-if="wxReadyOk" @click="chooseImage(2)">
                        <img class="list-item-image" v-if="userInfo.id_aspect" :src="baseUrl + userInfo.id_aspect"
                            alt="">
                        <div v-else class="list-item">+</div>
                    </div>
                </template>
            </van-field>
            <van-field name="radio" label="人员类型">
                <template #input>
                    <van-radio-group v-model="userInfo.role_type" direction="horizontal">
                        <van-radio :name="1">参赛人</van-radio>
                        <van-radio :name="2">监护人</van-radio>
                        <van-radio :name="3">评审人</van-radio>
                    </van-radio-group>
                </template>
            </van-field>
            <van-field required v-model="userInfo.mobile" type="number" label="手机号码" placeholder="手机号码"
                :rules="[{ regMobild, message: '手机号码格式错误' }]" />
            <van-field v-if="userInfo.role_type == 1" v-model="userInfo.school" label="就读学校" placeholder="就读学校" />
            <van-field v-if="userInfo.role_type == 1" v-model="userInfo.guardian_profession" label="监护人职业" placeholder="监护人职业" />
            <div style="margin: 0.6rem 0.3rem;">
                <van-button round block type="info" native-type="submit">提交信息</van-button>
            </div>
        </van-form>
        <wechat :callback="wxReadyOkMethod" />
    </div>
</template>

<script>
import { Toast, Form, Field, Button, RadioGroup, Radio } from 'vant';
import { RegObject } from "@/utils/utils";
import wechat from "@/view/common/Wxwechat.vue";
export default {
    props: {
        callback: {
            type: Function,
            default: function () { return ''; }
        }
    },
    components: {
        wechat,[Field.name]: Field, [Form.name]: Form, [Button.name]: Button, [RadioGroup.name]: RadioGroup, [Radio.name]: Radio
    },
    data: function () {
        return {
            regMobild: RegObject().regMobild,
            wxReadyOk: true,
            baseUrl: this.$API.ASSET_IMAGES_URL,
            userInfo: {
                school: '',
                role_type: '',
                mobile: '',
                guardian_profession: '',
                id_front: '',
                id_aspect: ''
            }
        };
    },
    mounted() {
        this.type = this.$route.query.type;
        if (this.type == 2) {
            this.id = this.$route.query.id;
            this.initAjaxMethod();
        }
    },
    methods: {
        initAjaxMethod() {
            this.$http
                .get(this.$API.RECOGNITION_DETAIL, { id: this.id })
                .then((res) => {
                    if (res.code == 1) {
                        this.userInfo.school = res.data.school;
                        this.userInfo.role_type = res.data.role_type;
                        this.userInfo.mobile = res.data.mobile;
                        this.userInfo.guardian_profession = res.data.guardian_profession;
                        this.userInfo.id_front = res.data.id_front;
                        this.userInfo.id_aspect = res.data.id_aspect;
                    }
                });
        },
        onSubmit() {
            this.$refs['userForm'].validate().then(() => {
                Toast.loading({ message: "加载中...", forbidClick: true });
                if(this.type == 2){
                    this.userInfo.id=this.id;
                }
                this.$http
                    .post(this.$API.RECOGNITION_EDIT, this.userInfo)
                    .then((res) => {
                        Toast.clear();
                        if (res.code == 1) {
                            this.$notify({ type: 'success', message: '操作成功' });
                            setTimeout(()=>{
                                this.$router.back()
                            },1500)
                        } else {
                            this.$notify({ type: 'warning', message: res.msg });
                        }
                    });
            }).catch(() => {
                this.$notify({ type: 'warning', message: '有必填项未填' });
            });
        },
        wxReadyOkMethod() {
            console.log('js准备好了');
            this.wxReadyOk = true;
        },
        chooseImage(flag) {
            let that = this;
            this.$WX.checkJsApi({
                jsApiList: ['chooseImage', 'getLocalImgData'],
                success: function (res) {
                    console.log('res', res);
                    if (res.errMsg == "checkJsApi:ok") {
                        that.chooseImages(flag);
                    }
                }
            });
        },
        chooseImages(flag) {
            let _this = this;
            this.$WX.chooseImage({
                count: 1, // 默认9
                sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function (res) {
                    _this.$WX.getLocalImgData({
                        localId: res.localIds[0],
                        success: function (ress) {
                            let bs64 = ress.localData; // localData是图片的base64数据，可以用 img 标签显示
                            if (bs64.indexOf('data:image') != 0) {
                                //判断是否有这样的头部，没有就加上
                                bs64 = 'data:image/jpeg;base64,' + bs64;
                            }
                            let content = bs64.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg');
                            _this.afterRead(content, flag);
                        }
                    });
                }
            });
        },
        afterRead(content, flag) {
            Toast.loading({ message: "上传中...", forbidClick: true, duration: 1000000 });
            this.$http
                .post(this.$API.UPLOAD_USER_IMGS, {
                    base64_image: content
                })
                .then((res) => {
                    console.log('res', res);
                    Toast.clear();
                    if (res.code == 1) {
                        this.$notify({ type: 'success', message: '上传成功' });
                        if (flag == 1) {
                            this.userInfo.id_front = res.url;
                        } else {
                            this.userInfo.id_aspect = res.url;
                        }
                    } else {
                        this.$notify({ type: 'warning', message: res.msg });
                    }
                });
        },
    },
};
</script>

<style lang="less">
.user-info-temps {
    padding: 0.2rem;

    /* 插件部分样式重置 */
    .van-cell {
        padding: 0.3rem 0.3rem;
        font-size: 0.3rem;
        line-height: 0.48rem;
    }

    .van-cell__title {
        font-size: 0.3rem;
    }

    .list-box1 {
        padding: 0 0.2rem;
        width: 100%;
        height: 3rem;
    }

    .list-item-image {
        width: 100%;
        height: 100%;
    }

    .list-item {
        width: 100%;
        height: 100%;
        position: relative;
        background-color: #fafafa;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        border: 1px solid #eee;
        border-radius: 4px;
        color: #888;
        overflow: hidden;
    }
}
</style>